<template>
    <div class="body">
        <div class="main">
            <div class="title">
                <i class="iconfont icon-denglu"></i>
            </div>

            <form class="login" action="javascript:;" method="post">
                <div>
                    <label>账号：</label>
                    <input type="text" autocomplete="off" class="edit-text" v-model="account.accountId" />
                </div>
                <div>
                    <label>密码：</label>
                    <input type="password" class="edit-text" v-model="account.accountPwd" />
                </div>
                <div>
                    <input type="submit" class="button-login" value="登录" @click="userLogin" />
                </div>
            </form>

            <div class="bottom">
                <div>其它登录方式：</div>
                <a href="javascript:" class="login_way iconfont icon-qqdenglu"></a>
                <a href="javascript:" class="login_way iconfont icon-weixindenglu"></a>
                <router-link class="link" to="/register">还没有账号？点击注册</router-link>
                <a href="javascript:" class="link">找回密码</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            account: { accountId: "", accountPwd: "" },
        };
    },
    methods: {
        async userLogin() {
            try {
                await this.$store.dispatch(
                    "user/userLogin",
                    this.account
                );
                this.$message({
                    message: "欢迎您，登录成功",
                    type: "success",
                });
                // 登录成功后返回上一级页面
                this.$router.go(-1);
            } catch (error) {
                this.$message({
                    message:error,
                    type:"error"
                })
            }
        },
    },
};
</script>

<style scoped>
.body {
    background-image: url("/public/images/bg2.png");
    background-size: 100%;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    background-color: rgba(255, 255, 255, 0.9);
    width: 510px;
    height: 480px;
    border-radius: 40px;
    box-shadow: 0 10px 10px rgba(255, 255, 255, 0.9);
}

.title {
    width: 420px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid rgb(60, 63, 65);
}

.title i {
    font-size: 60px;
    line-height: 100px;
}

.main .login {
    width: 440px;
    height: 250px;
    margin: 30px auto 0;
    text-align: center;
    border-bottom: 1px solid rgb(229, 229, 229);
}

.main .login .edit-text {
    width: 240px;
    height: 30px;
    margin: 15px auto;
    font-size: 15px;
    line-height: 30px;
    border: none;
    border-bottom: 1px solid rgb(229, 229, 229);
    outline: none;
}

.main .login .edit-text:hover {
    border-bottom: 1px solid rgb(193, 193, 193);
}

.main .login .edit-text:focus {
    color: rgb(18, 183, 245);
    border: none;
    border-bottom: 1px solid rgb(18, 183, 245);
}

.button-login {
    display: block;
    background-image: linear-gradient(
        to top,
        rgb(0, 182, 250),
        rgb(11, 194, 255)
    );
    color: white;
    font-size: 16px;
    line-height: 30px;
    width: 260px;
    height: 35px;
    margin: 20px 100px 0px;
    box-shadow: 0 0 5px rgb(11, 194, 255);
    border: none;
}

.button-login:hover {
    background-image: linear-gradient(
        to top,
        rgb(26, 194, 251),
        rgb(34, 203, 255)
    );
}

.button-login:active {
    background-image: linear-gradient(
        to top,
        rgb(10, 160, 251),
        rgb(20, 170, 255)
    );
}

.bottom div {
    margin: 20px 40px 10px;
    color: #666;
}

.bottom .link,
.login_way {
    text-decoration: none;
    color: #666;
}

.bottom .login_way {
    position: relative;
    left: 40px;
    margin-right: 20px;
    font-size: 30px;
}

.bottom .link {
    float: right;
    margin-right: 40px;
    font-size: 16px;
    margin-top: 30px;
}

.bottom .link:hover,
.login_way:hover {
    color: rgb(10, 160, 251);
}
</style>